<template>
  <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      style="height: 100%;">
    <el-submenu index="1" @click.native="setMainView('Map')">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>添加点坐标</span>
      </template>
      <el-menu-item-group>
        <template slot="title">ID</template>
        <el-menu-item index="1-0">
          <el-input placeholder="请输入ID" v-model="id" type="text" :change="check_num_id()">
            <template slot="prepend">ID：</template>
          </el-input>
        </el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group>
        <template slot="title">坐标</template>
        <el-menu-item>
          <el-button type="primary"  v-on:click="addPoint">选点工具</el-button>
          <el-button type="primary"  v-on:click="Downlaod">退出工具</el-button>
        </el-menu-item>
        <el-menu-item index="1-1">
          <el-input placeholder="请输入X坐标" v-model="coordinates.x" type="text" :change="check_num_x()">
          <template slot="prepend">X：</template>
        </el-input>
        </el-menu-item>
        <el-menu-item index="1-2">
          <el-input placeholder="请输入Y坐标" v-model="coordinates.y" type="text" :change="check_num_y()">
            <template slot="prepend">Y：</template>
          </el-input>
        </el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="地点名">
        <el-menu-item index="1-3">
          <el-input placeholder="请输入地点名字" v-model="placename" clearable>
        </el-input>
        </el-menu-item>
        <el-menu-item index="1-4">
          <el-button type="primary" v-on:click="Onsubmit">提交</el-button>
          <el-button type="info"  v-on:click="Clear">重置</el-button>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-menu-item index="2"  v-on:click="setMainView('PointList')">
      <i class="el-icon-menu"></i>
      <span slot="title">地点列表</span>
    </el-menu-item>
    <el-menu-item index="3">
      <i class="el-icon-document"></i>
      <span slot="title">返回地图</span>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-setting"></i>
      <span slot="title">导航四</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: "sidebar",

  data(){
    return{
      coordinates:{
        x:'',
        y:'',
      },
      placename:'',
      id:'',
    }
  },

  methods:{
    /* 正则检查 */
    check_num_x: function(){
      var price = '' + this.coordinates.x;
      price = price
          .replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
          .replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
          .replace('.', '$#$')
          .replace(/\./g, '')
          .replace('$#$', '.')
          .replace(/^(-)*(\d+)\.(\d\d\d\d\d\d\d).*$/, '$1$2.$3');
      if (price.indexOf('.') < 0 && price !== '') {
        // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        price = parseFloat(price);
      }
      this.coordinates.x = price;
    },


    /* 正则检查 */
    check_num_y: function(){
      var price = '' + this.coordinates.y;
      price = price
          .replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
          .replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
          .replace('.', '$#$')
          .replace(/\./g, '')
          .replace('$#$', '.')
          .replace(/^(-)*(\d+)\.(\d\d\d\d\d\d\d).*$/, '$1$2.$3');
      if (price.indexOf('.') < 0 && price !== '') {
        price = parseFloat(price);
      }
      this.coordinates.y = price;
    },

    /* 正则检查 */
    check_num_id: function(){
      var price = '' + this.id;
      price = price.replace(/[^\d]/g, '')
      this.id = price;
    },

    Downlaod(){
      this.$emit("download");
    },

    Onsubmit () {
      if(this.id===''){
        this.$message({
          showClose: true,
          message:'添加失败,检查id是否为空',
          type:'error'
        })
      }
      else {
        this.$axios
            .post('/addMap', {
              id: this.id,
              pointX: this.coordinates.x,
              pointY: this.coordinates.y,
              name: this.placename
            })
            .then(resp => {
              console.log(resp.data)

              if (resp.data.code === 200) {
                this.$message({
                  showClose: true,
                  message: '添加成功',
                  type: 'success'
                })
                this.Downlaod()
              } else {
                this.$message({
                  showClose: true,
                  message: '添加失败,检查id是否为空',
                  type: 'error'
                })
              }})
      }

      },

    Clear(){
      this.coordinates.x='';
      this.coordinates.y='';
      this.id = '';
      this.placename='';
    },
    setPoint:function (x,y){
      this.coordinates.x=x;
      this.coordinates.y=y;
    },
    addPoint(){
        this.$emit('addPoint');
    },
    setMainView(msg){
      this.$emit('setMainView',msg)
    }

  },

}

</script>

<style scoped>

</style>
